<template>
<div class="pro-bg-white">
	<x-header> 贷款申请 <router-link to="/" slot="right"> <a class="fa fa-home fa-15x"></a> </router-link></x-header>
	<div>
		<ab-scroller url="/pro/listJson" :params="{offset: 0, limit: 30,type: 'MARKET_PRODUCT',isSubmit: 1,isAuth: 1,status: 'ALREADY_SHELVES'}">
			<div slot-scope="slotScope">
				<div class="product-box">
					<div class="pro-title">热门产品</div>
					<div class="pro-list">
						<div class="pro" v-for="(def,index) in slotScope.rows" :key="index"  @click="setProClick(def,index)">
							<van-icon name="apps-o" />
							<div>{{def.name}}</div>
						</div>
					</div>
				</div>
			</div>
		</ab-scroller>
		<pro-route v-if="show" :show="show" :proId="proId" @handleChange="handleChange"></pro-route>
	</div>
</div>
</template>

<script>


import Vue from 'vue';
import { Icon } from 'vant';
import proRoute  from './component/proRoute.vue';
export default {
	components: {
		proRoute,
		[Icon.name]: Icon
	},
	data: function () {
		return {
			show: false,
			proId:'',
		}
	},
	created : function(){
	},
	methods: {
		setProClick(item, index){
			this.show = true;
			this.proId = item.id;
		},
		handleChange(e){
			this.show = false;
		},
	}
}
</script>
<style lang="less" scoped>
.pro-bg-white {
	min-height: 100vh;
    background-color: #ffffff!important;
}
.product-box{
	padding-top: 1em;
	.pro-title{
		height: 22px;
		font-size: 1.4em;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 2em;
		padding: 0 2em 1em;
	}
}
.pro-list{
	display: flex;
	flex-wrap: wrap;
	padding: 0 1em 0.5em;
	.pro{
		width: 33.3%;
		min-width: 33.3%;
		text-align: center;
		margin-top: 0.5em;
		
		.van-icon{
			font-size: 3em;
			color: #FF4A32;
		}
		div{
			font-size: 1.17em;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #4E5969;
			margin-top: 1em;
			min-height: 3em;
		}
		
	}
}
/deep/._v-container{
	margin-top: 50px;
	top: 0!important;
}
/deep/.van-overlay{
	z-index: 8!important;
}
/deep/.van-popup--bottom.van-popup--round{
	z-index: 9!important;
}
.product-poup-box{
	padding: 0 2em 1em;
	color: #1D2129;
	.product-poup-li{
		min-height: 4.5em;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #E5E6EB;
		font-size: 1.3em;
		&:last-child{
			border: 0;
		}
		.lable::after {
			content: '*';
			color: red;
		}
		.pro-zhi{
			flex: 1;
			text-align: right;
			/deep/.select-box{
				background-color: rgba(0, 0, 0, 0)
			}
			/deep/.vux-cell-box:not(:first-child):before{
				border: 0;
			}
		}
		.vux-popup-dialog{
			z-index:99;
		}
	}
}
</style>
